<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row>
        <a-col :span="24">
          <table class="table" width="100%" border="0">
            <tbody>
              <tr v-for="(item, index) in fieldArr" :key="index">
                <td style="width:120px;">
                  <a-checkbox v-model="item.checkAll" @change="(val) => onCheckItemChange(val, item)">{{
                    item.title
                  }}</a-checkbox>
                </td>
                <td>
                  <a-checkbox-group v-model="item.checkedList" @change="(val) => onChange(val, item)">
                    <a-row :gutter="[16,16]" type="flex">
                      <template v-for="(obj, index) in item.arr">
                        <a-col :span="6" :key="index">
                          <a-checkbox :key="obj.field" :value="obj.field">
                            {{ obj.label }}
                          </a-checkbox>
                        </a-col>
                      </template>
                    </a-row>
                  </a-checkbox-group>
                </td>
              </tr>
            </tbody>
          </table>
        </a-col>
      </a-row>
    </a-spin>
  </j-modal>
</template>

<script>
import { downLoadMix } from '@/utils/export-util/util'
import {dataBackfillExportExcel} from '@/api/LogManagement.js'
export default {
  name: 'TenantDataConfigModal',
  components: {
  },
  data() {
    return {
      title: '',
      checkAll: true,
      fieldArr: [
        {
          title: '列表字段',
          arr: [
            { field: 'warningNumber', label: '预警编号' },
            { field: 'id', label: '主键编号' },
            { field: 'victimPhone', label: '受害人手机号' },
            { field: 'warningTime', label: '预警时间' },
            { field: 'disposalMethod', label: '处置方式' },
            { field: 'feedbackSituationName', label: '反馈情况' },
            { field: 'feedbackSituationExt', label: '反馈情况备注' },
            { field: 'situationNoPhone', label: '未接情况' },
            { field: 'situationCalled', label: '已接情况' },
            { field: 'feedbackResult', label: '反馈结果' },
            { field: 'cheatedReportStatusName', label: '是否报案' },
            { field: 'cheatedFraudAmount', label: '被骗金额（元）' },
            { field: 'feedbackResultExt', label: '回访' },
            { field: 'notCheatedStatusConsciousnessName', label: '预警对象具备自我防范意识' },
            { field: 'notCheatedStatusAwakeName', label: '预警对象经劝阻后醒悟' },
            { field: 'notCheatedStoplossAmount', label: '劝阻金额（元）' },
            { field: 'backfillTime', label: '回填时间' },
            { field: 'feedbackStatus', label: '反馈状态' },
            { field: 'feedbackTime', label: '反馈时间' },
          ],
        },
      ],
      checkedLists: [],
      width: 1100,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      exportXlsParams:{ idList: [],exportFields:[], dataBackfillQuery: {} },

    }
  },
  computed: {
    allFields() {
      let datas = []
      for (let index in this.fieldArr) {
        if (this.fieldArr[index].arr) {
          datas = datas.concat(this.fieldArr[index].arr)
        }
      }
      return datas
    }
  },
  watch: {
    fieldArr: {
      immediate: true,
      deep: true,
      handler(val) {
        let arr = val.map((i) => i.checkedList).filter((obj) => obj !== undefined)
        this.checkedLists = this.flatten(arr)
        if (this.checkedLists.length === this.allFields.length) {
          Object.assign(this, { checkAll: true })
        } else {
          Object.assign(this, { checkAll: false })
        }
      }
    }
  },
  async created() {
    
  },
  methods: {
    add(params) {
      this.exportXlsParams = params
      this.visible = true
      let e = { target: { checked: true } }
      this.onCheckAllChange(e)
    },

    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.exportXlsParams.exportFields=this.checkedLists,
      dataBackfillExportExcel(this.exportXlsParams).then(async res => {
        if(res && res.size>0) {
          const fileName = '公安部数据回填日志-导出.xls'
          await downLoadMix(res, fileName)
          this.confirmLoading = false
          this.visible = false
          this.$emit('ok')
        } else {
          this.$message.warn("导出失败！")
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onCheckAllChange(e) {
      let checkedList = this.allFields.map((i) => i.field).filter((obj) => obj !== undefined)
      let fieldArr = JSON.parse(JSON.stringify(this.fieldArr))
      fieldArr.forEach((element) => {
        element.checkedList = e.target.checked ? element.arr.map((i) => i.field) : []
        element.checkAll = e.target.checked
      })
      Object.assign(this, {
        checkAll: e.target.checked,
        checkedList: e.target.checked ? checkedList : [],
        fieldArr: fieldArr,
      })
    },
    onCheckItemChange(val, item) {
      if (val.target.checked) {
        item.checkedList = item.arr.map((i) => i.field)
      } else {
        item.checkedList = []
      }
    },
    onChange(checkedList, item) {
      item.checkAll = checkedList.length === item.arr.length
    },
    flatten(arr) {
      return arr.reduce((prev, next) => {
        return prev.concat(Array.isArray(next) ? this.flatten(next) : next)
      }, [])
    },
  },
}
</script>
<style lang="less" scoped>
@color: #e8e8e8;
.table {
  border:1px solid @color;
  tr {
    td {
      padding: 8px;
      border-left:1px solid @color;
      border-bottom:1px solid @color;
      &:first-child {
        background-color: #81d3f82a;
        border-left-width:0;
      }
    }
    &:last-child {
      td {
        border-bottom-width:0;
      }
    }
  }
}
</style>
